<template>
  <div>
    <van-nav-bar title="用户">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="a">
      <van-image
        round
        width="10rem"
        height="10rem"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <p v-if="l">{{ this.nickname }}</p>
      <p v-else>请登录</p>

      <van-button @click="del" v-if="l" style="width: 90%" type="danger"
        >已登录</van-button
      >
      <van-button v-else to="/login" style="width: 90%" type="primary"
        >请登录</van-button
      >
    </div>

    <van-cell icon="cart-o" title="地址管理" is-link />
    <van-cell icon="cart-o" title="收藏管理" />
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/cate" icon="search">分类</van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/loginno" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  created() {},
  mounted() {
    if (localStorage.userInfo != undefined) {
      this.l = true;

      console.log(JSON.parse(localStorage.userInfo).nickname);
      this.nickname = JSON.parse(localStorage.userInfo).nickname;
    }
  },
  data() {
    return {
      active: 3,
      l: false,
      nickname: "",
    };
  },
  methods: {
    del() {
      window.localStorage.clear();
      this.$router.go(0);
    },
  },
};
</script>
<style >
.a {
  text-align: center;
}
</style>